<template>
	<view class="notice-bar">
		<image  src="/static/sound.png" mode="aspectFill" class="notice-bar-icon"></image>
		<swiper vertical :autoplay="autoplay" circular easing-function="linear" :interval="5000" :duration="1000" class="notice-bar-swiper">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="notice-item text-ellipsis-1">
					<heart-text :text="item"></heart-text>
				</view>
			</swiper-item>
		</swiper>
	</view>
	
</template>

<script>
	export default{
		props:{
			list:Array,
			autoplay:{
				type:Boolean,
				default:true
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice-bar{
		display: flex;
		align-items: center;
		height:60rpx;
		padding-left: 30rpx;
		background:rgba(231,64,74,0.1);
	}
	.notice-bar-icon{
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
	.notice-bar-swiper{
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.notice-item{
		display: flex;
		align-items: center;
		height: 100%;
		font-size: 24rpx;
		color:#E7404A;
	}
</style>
